/**
 * 
 */

/*
 * container:   JQuery Object, the container for settingpanel
 * domObj:      JQuery Object, the content of settingpanel
 * profile:     JSON, {top:20,...}
 * callbacks:   Object, {onShow,onHide}
 * 
 * getDom:      Function, get the setting panel body
 * getVisible:  Function, get the state of show or hide
 * show:        Function, show setting panel
 * hide:        Function, hide setting panel
 * toggle:      Function, hide it if show, show it if hide
 */
if (!QSAPI) {
	var QSAPI = {
		Widget : {}
	};
} else if (!QSAPI.Widget) {
	QSAPI.Widget = {};
}
QSAPI.Widget.optionsSettingPanel=function(container,domObj,profile,callbacks){
	this.HTML='<div class="qs-ui-setpn hide">'+
              '<div class="hd settinghd"><h3>Settings</h3><a href="" class="qs-ui-close">x</a></div>'+
              '<div class="bd settingbd"></div>'+
              '<div class="ft"></div>'+
              '</div>';
	this.el=null;
	this.profile={};
	this.visible=false;
	if(profile) {
        $.extend(this.profile,profile);
    }
	this.callbacks=callbacks||{}; 
	this.init(container,domObj);
};
QSAPI.Widget.optionsSettingPanel.prototype={
	init:function(container,domObj){	    
		this.el=$(this.HTML);
		this.closeBtn=this.el.find('.qs-ui-close');
		this.elBody=this.el.find('.bd');
		this.el.appendTo(container||$('body'));
		if(domObj){
			this._appendDom(domObj);
		}
		this.closeBtn.bind('click',this,function(e){
			e.preventDefault();
			var self = e.data;
            self.hide();
		});
	},
	_appendDom:function(domObj){
		this.elBody.append(domObj);
	},
	getVisible:function(){
		return this.visible;
	},
	getDom:function(){
		return this.elBody;
	},
	show:function(){			
		this.el[0].className='qs-ui-setpn';
		if(typeof(this.callbacks.onShow)== "function"){
            this.callbacks.onShow(this.elBody);
        }
		this.visible=true;
	},
	hide:function(){
        this.el[0].className='qs-ui-setpn hide';
		if(typeof(this.callbacks.onHide)== "function"){
            this.callbacks.onHide(this.elBody);
        }
		this.visible=false;
	},
	toggle:function(){
		var clsName=this.el[0].className;
		if(clsName=='qs-ui-setpn'){
			this.hide();			
		}else{
			this.show();
		}
	}
}